<template>
  <div class="flex-1">
    <!-- title -->
    <div
      class="p-[0_20px] h-50px flex items-center b-b b-b-solid b-b-[#e1e2e5] box-border"
    >
      <span class="inline-block w4px h13px bg-#00a1d6 m-r-5px"></span>
      <span class="c-#00a1d6 text-14px">通知设置</span>
    </div>

    <div class="p-[0_20px] m-t-20px flex items-center justify-between">
      <div class="float-left">
        <p class="text-14px">多设备切换续播提醒</p>
        <p class="text-12px c-#999 leading-20px">
          当在不同设备切换时，首页会显示最近一个在其他设备上未看完的视频
        </p>
      </div>
      <el-switch v-model="notificationSettings.notifyResumePlayback" />
    </div>

    <div class="p-[0_20px] m-t-20px flex items-center justify-between">
      <div class="float-left">
        <p class="text-14px">bilibili通知小助手：关注的UP主更新提醒</p>
        <p class="text-12px c-#999 leading-20px">
          当你关注的UP主有更新的视频内容时，系统通知栏显示最近更新的视频
        </p>
      </div>
      <el-switch v-model="notificationSettings.notifyUpUpdate" />
    </div>

    <div class="p-[0_20px] m-t-20px flex items-center justify-between">
      <div class="float-left">
        <p class="text-14px">bilibili通知小助手：直播开播提醒</p>
        <p class="text-12px c-#999 leading-20px">
          当你关注的UP主开播时，系统通知栏显示开播提醒
        </p>
      </div>
      <el-switch v-model="notificationSettings.notifyLiveStart" />
    </div>

    <div class="p-[0_20px] m-t-20px flex items-center justify-between">
      <div class="float-left">
        <p class="text-14px">bilibili通知小助手：热点信息更新提醒</p>
        <p class="text-12px c-#999 leading-20px">
          当有热门内容，如每周必看等更新时，系统通知栏显示推送
        </p>
      </div>
      <el-switch v-model="notificationSettings.notifyHotUpdate" />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from "vue";

interface NotificationSettings {
  /** 多设备切换续播提醒 */
  notifyResumePlayback: boolean;

  /** 关注的UP主更新提醒 */
  notifyUpUpdate: boolean;

  /** 直播开播提醒 */
  notifyLiveStart: boolean;

  /** 热点信息更新提醒 */
  notifyHotUpdate: boolean;
}

const notificationSettings = ref<NotificationSettings>({
  notifyResumePlayback: true,
  notifyUpUpdate: true,
  notifyLiveStart: true,
  notifyHotUpdate: true,
});

watch(
  notificationSettings,
  (newVal) => {
    console.log("提交数据", newVal);
  },
  { deep: true }
);
</script>

<style scoped></style>
